<template>
	<view class="out">
		<view class="list">
			<view class="row" v-for="(item,index) in lists" :key="item.id">
				<view class="text">{{index+1}}. {{item.title}}</view>
				<view class="close">
					<icon type="clear" size="26" @click="delHot(index)" />
				</view>
			</view>
		</view>
		<view class="count">
			共{{lists.length}}条结果
		</view>
	</view>
</template>

<script setup>
	const emit = defineEmits(["del"])
	import {
		ref
	} from "vue";
	const props = defineProps({
		lists: {
			type: Object
		}
	})

	function delHot(index) {
		emit("del", index)
	}
</script>

<style lang="scss" scoped>
	.out {
		width: 90vw;
		margin: 15px auto;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		padding: 15px;
		box-sizing: border-box;

		.list {
			// height: 60vw;
			.row {
				padding: 10px 0;
				border-bottom: 1px solid #e8e8e8;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 18px;
				color: #333;

				.text {
					padding-right: 5px;
					box-sizing: border-box;
				}
			}
		}

		.count {
			padding: 10px 0;
			font-size: 15px;
			color: #888;
			text-align: center;
		}
	}
</style>